import React, {Component} from 'react';
import SelectFrame from './selectFrame';//选择框
import LinearGradient from 'react-native-linear-gradient'
import ViewShot, {captureRef, captureScreen} from "react-native-view-shot";
import Modal from 'react-native-modalbox'
import {
    View,
    Text,
    Image,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    ScrollView, Platform, CameraRoll, NativeModules,
    Alert
} from 'react-native'
import Util from "../common/util";
import * as URLconstant from '../constant/URLconstant'

const SaveModule = NativeModules.SavePicture;


const screenWidth = Dimensions.get('window').width;
const screenHeight = Dimensions.get('window').height;
var img
var hor_source, ver_source, horn_source //外框图片链接
var horImage, verImage, hornImage //外框图片宽度，长度等信息
var in_hor_source, in_ver_source, in_horn_source //内框图片链接
var inHorImage, inVerImage, inHornImage //内框图片宽度，长度等信息
export default class matchFrame extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            core_cm: 0,
            source_cm: 5,//外框宽度
            in_source_cm: 0,//内框宽度
            in_hor_width: 0,
            in_hor_height: 0,
            in_horn_width: 0,
            in_horn_height: 0,
            in_ver_width: 0,
            in_ver_height: 0,
            outLiningSize: 0,//外衬
            outLiningSizeList: [0, 50, 100, 150, 200, 250],
            showLining: false,//是否展示外/内衬
            liningIndex: 0,
            inLiningIndex: 0,
            inLiningSize: 0,//内衬卡纸尺寸
            inLiningSizeList: [0, 15, 20, 25, 30, 35],
            bgColor: [],//背景色块
            showBg: false,//是否显示修改背景
            selectBgColor: '',
            isOpen: false,
            loaded:false
        };
    }

    componentDidMount() {
        let {image_url, picLength, outerFrame} = this.props.route.params
        this.getPaper(1)
        this.getPaper(2)
        this.getBgColor()
        if (image_url) {
            img = image_url
        }
        if (picLength) {
            this.setState({
                core_cm: picLength
            })
        }
        if (outerFrame) {
            outerFrame=JSON.parse(outerFrame)
            hor_source = outerFrame.length_img
            ver_source = outerFrame.wide_img
            horn_source = outerFrame.angle_img
            this.setState({
                source_cm: outerFrame.width,
                outerFrame: outerFrame
            })
        }
        this.getImgInfo()
    }


    getBgColor() {
        let url = URLconstant.GET_FRAME_BG
        Util.get(url, [], (datas) => {
            if (datas.status == 0) {
                this.setState({
                    bgColor: datas.data.rows
                })
            }
        }, (err) => {

        })
    }

    getPaper(type) {
        let url = URLconstant.GET_FRAME_PAPER
        let datakey = []
        datakey['type'] = type
        Util.get(url, datakey, (datas) => {
            if (datas.status == 0) {
                let data = datas.data.rows
                if (type == 1) {
                    this.setState({
                        outPaper: data
                    })
                    this.getPaperInfo(data[0].image_url, 0)
                } else {
                    this.setState({
                        inPaper: data
                    })
                    this.getInPaperInfo(data[0].image_url, 0)
                }
            }

        }, (err) => {
            LOG('err=' + err)
        })
    }


    async getImgInfo() {
        Image.getSize(img, (width, height) => {
            this.setState({
                picWidth: width,
                picHeight: height,
                sceneWidth: screenWidth - 50
            })
            this.setImgInfo()
            // this.getHorImage()
        }, (error) => {
            LOG('图片路径错误。。。。。。。。' + error);
        })
    }

    setImgInfo() {
        let picWidth = this.state.picWidth
        let picHeight = this.state.picHeight
        let sceneWidth = this.state.sceneWidth
        let core_cm = this.state.core_cm
        let radio = this.backRadio(core_cm)
        let imgWidth = Math.ceil(sceneWidth * radio)
        let imgHeight = Math.ceil(imgWidth * picHeight / picWidth)
        let top = 0
        let left = (sceneWidth - imgWidth) / 2
        let outLiningSize = this.state.outLiningSize
        let inLiningSize = this.state.inLiningSize
        let liningRadio = this.backRadio(outLiningSize)
        let inLiningRadio = this.backRadio(inLiningSize)
        let out_lining_width = Math.ceil(sceneWidth * liningRadio)
        let in_lining_width = Math.ceil(sceneWidth * inLiningRadio)
        this.setState({
            imgWidth: imgWidth,
            imgHeight: imgHeight,
            top: top,
            left: left,
            out_lining_width: out_lining_width,
            in_lining_width: in_lining_width
        })
        this.getHorImage()
        let innerFrame = this.state.innerFrame
        if (innerFrame) {
            this.getInsideHor()
        }

    }

    backRadio(type) {
        let core_cm = this.state.core_cm
        let source_cm = this.state.source_cm
        let in_source_cm = this.state.in_source_cm
        let outLiningSize = this.state.outLiningSize
        let inLiningSize = this.state.inLiningSize
        let radio = type / (source_cm * 2 + in_source_cm * 2 + core_cm + outLiningSize * 2 + inLiningSize * 2)
        return radio
    }


    async getHorImage() {
        await Image.getSize(hor_source, (width, height) => {
            let obj = {}
            obj.width = width
            obj.height = height
            horImage = obj
            this.getVerImage()
        })
    }

    async getVerImage() {
        await Image.getSize(ver_source, (width, height) => {
            let obj = {}
            obj.width = width
            obj.height = height
            verImage = obj
            this.getHornImage()
        })
    }

    async getHornImage() {
        await Image.getSize(horn_source, (width, height) => {
            let obj = {}
            obj.width = width
            obj.height = height
            hornImage = obj
            this.setSourceInfo()
        })
    }

    setSourceInfo() {
        let sceneWidth = this.state.sceneWidth
        let source_cm = this.state.source_cm
        let radio = this.backRadio(source_cm)
        let horn_width = Math.ceil(sceneWidth * radio)
        let horn_height = Math.ceil(horn_width * hornImage.height / hornImage.width)
        let hor_height = horn_height
        let hor_width = Math.ceil(hor_height * horImage.width / horImage.height)
        let ver_width = horn_width
        let ver_height = Math.ceil(ver_width * verImage.height / verImage.width)
        this.setState({
            hor_width: hor_width,
            hor_height: hor_height,
            horn_width: horn_width,
            horn_height: horn_height,
            ver_width: ver_width,
            ver_height: ver_height,
            loaded:true
        })
    }


    showFrame() {
        let imgWidth = this.state.imgWidth
        let imgHeight = this.state.imgHeight
        let horn_height = this.state.horn_height
        let in_horn_height = this.state.in_horn_height
        let top = this.state.top
        let out_lining_width = this.state.out_lining_width || 0
        let in_lining_width = this.state.in_lining_width || 0
        let height = imgHeight + horn_height * 2 + in_horn_height * 2 + out_lining_width * 2 + in_lining_width * 2
        let innerFrame = this.state.innerFrame
        let width = imgWidth + horn_height * 2 + in_horn_height * 2 + out_lining_width * 2 + in_lining_width * 2
        let left = horn_height + in_horn_height + out_lining_width + in_lining_width
        top = top + horn_height + in_horn_height + out_lining_width + in_lining_width
        return (
            <View style={{flex: 1, alignItems: 'center', paddingVertical: 50}}>
                <ViewShot
                    ref="shotView"
                >
                    <View style={{height: height, width: width}}>
                        <Image
                            source={{uri: img}}
                            resizeMode={'cover'}
                            style={{
                                width: imgWidth,
                                height: imgHeight,
                                position: 'absolute',
                                top: top,
                                left: left
                            }}
                        />
                        {this.showTopFrame()}
                        {this.showLeftFrame()}
                        {this.showBottomFrame()}
                        {this.showRightFrame()}
                        {this.showSquareFrame()}
                        {
                            innerFrame == null ? null :
                                <View style={{
                                    flex: 1,
                                    position: 'absolute',
                                    left: 0,
                                    zIndex: 999,
                                    top: 0,
                                    right: 0,
                                    bottom: 0
                                }}>
                                    {this.showInTopFrame()}
                                    {this.showInLeftFrame()}
                                    {this.showInBottomFrame()}
                                    {this.showInRightFrame()}
                                    {this.showInSquareFrame()}
                                </View>
                        }
                        {this.showOutLiningView()}
                        {this.showInLiningView()}
                    </View>
                </ViewShot>
            </View>
        )
    }


    //外衬卡纸
    showOutLiningView() {
        let out_lining_width = this.state.out_lining_width || 0
        let in_lining_width = this.state.in_lining_width || 0
        let imgHeight = this.state.imgHeight
        let imgWidth = this.state.imgWidth
        let in_horn_height = this.state.in_horn_height
        let height1 = imgHeight + out_lining_width * 2 + in_lining_width * 2
        let liningIndex = this.state.liningIndex
        let left = this.state.left
        let top = this.state.top
        let hor_height = this.state.hor_height
        let left1 = this.state.ver_width + this.state.in_ver_width
        let top1 = top + hor_height + in_horn_height
        let width2 = imgWidth + in_lining_width * 2
        let left2 = left1 + out_lining_width
        let left3 = left + imgWidth + in_lining_width
        let top2 = top + hor_height + in_horn_height + out_lining_width + imgHeight + in_lining_width * 2
        let outPaper = this.state.outPaper
        if (!outPaper || outPaper.length == 0) {
            return null
        }
        let outPaperUri = this.state.outPaperUri || outPaper[liningIndex].image_url
        let outPaperWidth = this.state.outPaperWidth
        let outPaperHeight = this.state.outPaperHeight
        let paper_w1, paper_w2, paper_h1, paper_h2
        paper_h1 = out_lining_width
        paper_w1 = outPaperWidth * paper_h1 / outPaperHeight
        paper_w1 = Math.ceil(paper_w1)
        if (paper_w1 == 0) {
            return null
        }
        let w_total = width2 / paper_w1
        let w_row
        let w_list = []
        for (let i = 0; i < w_total; i++) {
            w_row = (
                <Image
                    key={i}
                    source={{uri: outPaperUri}}
                    resizeMode={'cover'}
                    style={{width: paper_w1, height: paper_h1}}
                />
            )
            w_list.push(w_row)
        }
        paper_w2 = out_lining_width
        paper_h2 = outPaperHeight * paper_w2 / outPaperWidth
        paper_h2 = Math.ceil(paper_h2)
        if (paper_h2 == 0) {
            return null
        }
        let h_total = height1 / paper_h2
        let h_row
        let h_list = []
        for (let i = 0; i < h_total; i++) {
            h_row = (
                <Image
                    key={i}
                    source={{uri: outPaperUri}}
                    resizeMode={'cover'}
                    style={{width: paper_w2, height: paper_h2}}
                />
            )
            h_list.push(h_row)
        }
        return (
            <View style={{flex: 1, position: 'absolute', left: 0, zIndex: 9999, top: 0, right: 0, bottom: 0}}>
                <View style={{
                    width: out_lining_width,
                    height: height1,
                    backgroundColor: 'transparent',
                    position: 'absolute',
                    top: top1,
                    left: left1,
                    overflow:'hidden'
                }}>
                    {h_list}
                </View>
                <View style={{
                    width: width2,
                    height: out_lining_width,
                    backgroundColor: 'transparent',
                    position: 'absolute',
                    top: top1,
                    left: left2,
                    flexDirection: 'row',
                    overflow:'hidden'
                }}>
                    {w_list}
                </View>
                <View style={{
                    width: out_lining_width,
                    height: height1,
                    backgroundColor: 'transparent',
                    position: 'absolute',
                    top: top1,
                    right: left1,
                    overflow:'hidden'
                }}>
                    {h_list}
                </View>
                <View style={{
                    width: width2,
                    height: out_lining_width,
                    backgroundColor: 'transparent',
                    position: 'absolute',
                    top: top2,
                    left: left2,
                    flexDirection: 'row',
                    overflow:'hidden'
                }}>
                    {w_list}
                </View>
            </View>
        )
    }

    //内衬卡纸
    showInLiningView() {
        let in_lining_width = this.state.in_lining_width || 0
        let out_lining_width = this.state.out_lining_width || 0
        let imgHeight = this.state.imgHeight
        let imgWidth = this.state.imgWidth
        let height = imgHeight + in_lining_width * 2
        let left = this.state.left
        let top = this.state.top
        let hor_height = this.state.hor_height
        let in_horn_height = this.state.in_horn_height
        let top1 = top + hor_height + in_horn_height + out_lining_width
        let top2 = top + hor_height + in_horn_height + out_lining_width + imgHeight + in_lining_width
        let left1 = this.state.ver_width + this.state.in_ver_width + this.state.out_lining_width
        let left2 = left1 + this.state.in_lining_width
        let left3 = left + imgWidth
        let inPaper = this.state.inPaper
        if (!inPaper || inPaper.length == 0) {
            return null
        }
        let inLiningIndex = this.state.inLiningIndex
        let inPaperUri = this.state.inPaperUri || inPaper[inLiningIndex].image_url
        let inPaperWidth = this.state.inPaperWidth
        let inPaperHeight = this.state.inPaperHeight
        let paper_w1, paper_w2, paper_h1, paper_h2
        paper_h1 = in_lining_width
        paper_w1 = inPaperWidth * paper_h1 / inPaperHeight
        paper_w1 = Math.ceil(paper_w1)
        if (paper_w1 == 0) {
            return null
        }
        let w_total = imgWidth / paper_w1
        let w_row
        let w_list = []
        for (let i = 0; i < w_total; i++) {
            w_row = (
                <Image
                    key={i}
                    source={{uri: inPaperUri}}
                    resizeMode={'cover'}
                    style={{width: paper_w1, height: paper_h1}}
                />
            )
            w_list.push(w_row)
        }

        paper_w2 = in_lining_width
        paper_h2 = inPaperHeight * paper_w2 / inPaperWidth
        paper_h2 = Math.ceil(paper_h2)
        if (paper_h2 == 0) {
            return null
        }
        let h_total = height / paper_h2
        let h_row
        let h_list = []
        for (let i = 0; i < h_total; i++) {
            h_row = (
                <Image
                    key={i}
                    source={{uri: inPaperUri}}
                    resizeMode={'cover'}
                    style={{width: paper_w2, height: paper_h2}}
                />
            )
            h_list.push(h_row)
        }

        return (
            <View style={{flex: 1, position: 'absolute', left: 0, zIndex: 9999, top: 0, right: 0, bottom: 0}}>
                <View style={{
                    width: in_lining_width,
                    height: height,
                    backgroundColor: 'transparent',
                    position: 'absolute',
                    top: top1,
                    left: left1,
                    overflow:'hidden'
                }}>
                    {h_list}
                </View>
                <View style={{
                    width: imgWidth,
                    height: in_lining_width,
                    backgroundColor: 'transparent',
                    position: 'absolute',
                    top: top1,
                    left: left2,
                    flexDirection: 'row',
                    overflow:'hidden'
                }}>
                    {w_list}
                </View>
                <View style={{
                    width: in_lining_width,
                    height: height,
                    backgroundColor: 'transparent',
                    position: 'absolute',
                    top: top1,
                    right: left1,
                    overflow:'hidden'
                }}>
                    {h_list}
                </View>
                <View style={{
                    width: imgWidth,
                    height: in_lining_width,
                    backgroundColor: 'transparent',
                    position: 'absolute',
                    top: top2,
                    left: left2,
                    flexDirection: 'row',
                    overflow:'hidden'
                }}>
                    {w_list}
                </View>
            </View>
        )
    }

    //内框上框
    showInTopFrame() {
        let left = this.state.left
        let top = this.state.top
        let imgWidth = this.state.imgWidth
        let in_hor_width = this.state.in_hor_width
        let out_lining_width = this.state.out_lining_width || 0
        if (in_hor_width == 0) {
            return false;
        }
        let in_hor_height = this.state.in_hor_height
        let in_lining_width = this.state.in_lining_width || 0
        let width = imgWidth + out_lining_width * 2 + in_lining_width * 2
        let total = width / in_hor_width
        let rows
        let list = []
        let hor_height = this.state.hor_height
        let ver_width = this.state.ver_width
        let in_ver_width = this.state.in_ver_width
        left = ver_width + in_ver_width
        for (let i = 0; i < total; i++) {
            rows = (
                <Image
                    source={{uri: in_hor_source}}
                    resizeMode={'stretch'}
                    style={{width: in_hor_width, height: in_hor_height}}
                    key={i}
                />
            )
            list.push(rows)
        }
        return (
            <View style={{
                position: 'absolute',
                top: top + hor_height,
                left: left,
                width: width,
                height: in_hor_height,
                flexDirection: 'row',
                backgroundColor: "transparent",
                overflow:'hidden'
            }}>
                {list}
            </View>
        )
    }

    //内框左框
    showInLeftFrame() {
        let left = this.state.left
        let top = this.state.top
        let imgHeight = this.state.imgHeight
        let in_ver_height = this.state.in_ver_height
        let in_ver_width = this.state.in_ver_width
        let out_lining_width = this.state.out_lining_width || 0
        if (in_ver_height == 0) {
            return false
        }
        let in_lining_width = this.state.in_lining_width || 0
        let height = imgHeight + out_lining_width * 2 + in_lining_width * 2
        let total = height / in_ver_height
        let hor_height = this.state.hor_height
        let in_hor_height = this.state.in_hor_height
        let rows
        let list = []
        let ver_width = this.state.ver_width
        left = ver_width
        top = top + hor_height + in_hor_height
        for (let i = 0; i < total; i++) {
            rows = (
                <Image
                    source={{uri: in_ver_source}}
                    resizeMode={'stretch'}
                    style={{width: in_ver_width, height: in_ver_height}}
                    key={i}
                />
            )
            list.push(rows)
        }
        return (
            <View style={{
                position: 'absolute',
                top: top,
                left: left,
                width: in_ver_width,
                height: height,
                overflow: 'hidden',
                backgroundColor: "transparent"
            }}>
                {list}
            </View>
        )
    }

    //内框下框
    showInBottomFrame() {
        let left = this.state.left
        let top = this.state.top
        let imgWidth = this.state.imgWidth
        let in_hor_width = this.state.in_hor_width
        let out_lining_width = this.state.out_lining_width || 0
        if (in_hor_width == 0) {
            return false;
        }
        let in_hor_height = this.state.in_hor_height
        let in_lining_width = this.state.in_lining_width || 0
        let width = imgWidth + out_lining_width * 2 + in_lining_width * 2
        let total = width / in_hor_width
        let imgHeight = this.state.imgHeight
        let rows
        let list = []
        let hor_height = this.state.hor_height
        let ver_width = this.state.ver_width
        let in_ver_width = this.state.in_ver_width
        left = ver_width + in_ver_width
        top = top + hor_height + imgHeight + in_hor_height + out_lining_width * 2 + in_lining_width * 2
        for (let i = 0; i < total; i++) {
            rows = (
                <Image
                    source={{uri: in_hor_source}}
                    resizeMode={'stretch'}
                    style={{width: in_hor_width, height: in_hor_height, transform: [{rotateX: '180deg'}]}}
                    key={i}
                />
            )
            list.push(rows)
        }
        return (
            <View style={{
                position: 'absolute',
                top: top,
                left: left,
                width: width,
                height: in_hor_height,
                flexDirection: 'row',
                backgroundColor: "transparent",
                overflow:'hidden'
            }}>
                {list}
            </View>
        )
    }

    //内框右框
    showInRightFrame() {
        let left = this.state.left
        let top = this.state.top
        let imgHeight = this.state.imgHeight
        let imgWidth = this.state.imgWidth
        let in_ver_height = this.state.in_ver_height
        let in_ver_width = this.state.in_ver_width
        let out_lining_width = this.state.out_lining_width || 0
        if (in_ver_height == 0) {
            return false
        }
        let in_lining_width = this.state.in_lining_width || 0
        let height = imgHeight + out_lining_width * 2 + in_lining_width * 2
        let total = height / in_ver_height
        let hor_height = this.state.hor_height
        let in_hor_height = this.state.in_hor_height
        let rows
        let list = []
        let right = this.state.ver_width
        top = top + hor_height + in_hor_height
        for (let i = 0; i < total; i++) {
            rows = (
                <Image
                    source={{uri: in_ver_source}}
                    resizeMode={'stretch'}
                    style={{width: in_ver_width, height: in_ver_height, transform: [{rotateY: '180deg'}]}}
                    key={i}
                />
            )
            list.push(rows)
        }
        return (
            <View style={{
                position: 'absolute',
                top: top,
                right: right,
                width: in_ver_width,
                height: height,
                overflow: 'hidden',
                backgroundColor: "transparent"
            }}>
                {list}
            </View>
        )
    }

    //内框角框
    showInSquareFrame() {
        let top = this.state.top
        let imgWidth = this.state.imgWidth
        let imgHeight = this.state.imgHeight
        let horn_width = this.state.horn_width
        let horn_height = this.state.horn_height
        let in_horn_width = this.state.in_horn_width
        let in_horn_height = this.state.in_horn_height
        let out_lining_width = this.state.out_lining_width || 0
        let in_lining_width = this.state.in_lining_width || 0
        let ver_width = this.state.ver_width
        let left = ver_width
        let right = ver_width
        return (
            <View>
                <Image
                    source={{uri: in_horn_source}}
                    resizeMode={'cover'}
                    style={{
                        width: in_horn_width,
                        height: in_horn_height,
                        position: 'absolute',
                        top: top + horn_height,
                        left: left
                    }}
                />
                <Image
                    source={{uri: in_horn_source}}
                    resizeMode={'cover'}
                    style={{
                        width: in_horn_width,
                        height: in_horn_height,
                        position: 'absolute',
                        top: top + horn_height,
                        right: right,
                        transform: [{rotateY: '180deg'}]
                    }}
                />
                <Image
                    source={{uri: in_horn_source}}
                    resizeMode={'cover'}
                    style={{
                        width: in_horn_width,
                        height: in_horn_height,
                        position: 'absolute',
                        top: top + imgHeight + horn_height + in_horn_height + out_lining_width * 2 + in_lining_width * 2,
                        left: left,
                        transform: [{rotateX: '180deg'}]
                    }}
                />
                <Image
                    source={{uri: in_horn_source}}
                    resizeMode={'cover'}
                    style={{
                        width: in_horn_width,
                        height: in_horn_height,
                        position: 'absolute',
                        top: top + imgHeight + horn_height + in_horn_height + out_lining_width * 2 + in_lining_width * 2,
                        right: right,
                        transform: [{rotateY: '180deg'}, {rotateX: '180deg'}]
                    }}
                />
            </View>
        )
    }

    //外框角框
    showSquareFrame() {
        let left = 0
        let top = this.state.top
        let imgWidth = this.state.imgWidth
        let imgHeight = this.state.imgHeight
        let horn_width = this.state.horn_width
        let horn_height = this.state.horn_height
        let in_horn_width = this.state.in_horn_width
        let in_horn_height = this.state.in_horn_height
        let out_lining_width = this.state.out_lining_width || 0
        let in_lining_width = this.state.in_lining_width || 0
        let left1 = horn_width + in_horn_width * 2 + imgWidth + out_lining_width * 2 + in_lining_width * 2
        return (
            <View style={{flex: 1, position: 'absolute', top: 0, left: 0}}>
                <Image
                    source={{uri: horn_source}}
                    resizeMode={'cover'}
                    style={{
                        width: horn_width,
                        height: horn_height,
                        position: 'absolute',
                        top: top,
                        left: left,
                    }}
                />
                <Image
                    source={{uri: horn_source}}
                    resizeMode={'cover'}
                    style={{
                        width: horn_width,
                        height: horn_height,
                        position: 'absolute',
                        top: top,
                        left: left1,
                        transform: [{rotateY: '180deg'}]
                    }}
                />
                <Image
                    source={{uri: horn_source}}
                    resizeMode={'cover'}
                    style={{
                        width: horn_width,
                        height: horn_height,
                        position: 'absolute',
                        top: top + imgHeight + horn_height + in_horn_height * 2 + out_lining_width * 2 + in_lining_width * 2,
                        left: left,
                        transform: [{rotateX: '180deg'}]
                    }}
                />
                <Image
                    source={{uri: horn_source}}
                    resizeMode={'cover'}
                    style={{
                        width: horn_width,
                        height: horn_height,
                        position: 'absolute',
                        top: top + imgHeight + horn_height + in_horn_height * 2 + out_lining_width * 2 + in_lining_width * 2,
                        left: left1,
                        transform: [{rotateY: '180deg'}, {rotateX: '180deg'}]
                    }}
                />
            </View>
        )
    }

    //外框上框
    showTopFrame() {
        let left = this.state.left
        let top = this.state.top
        let imgWidth = this.state.imgWidth
        let hor_width = this.state.hor_width
        let hor_height = this.state.hor_height
        let in_horn_width = this.state.in_horn_width
        let out_lining_width = this.state.out_lining_width || 0
        let in_lining_width = this.state.in_lining_width || 0
        let width = imgWidth + in_horn_width * 2 + out_lining_width * 2 + in_lining_width * 2
        let total = width / hor_width
        let rows
        let list = []
        let horn_width = this.state.horn_width
        left = horn_width
        for (let i = 0; i < total; i++) {
            rows = (
                <Image
                    source={{uri: hor_source}}
                    resizeMode={'cover'}
                    style={{width: hor_width, height: hor_height}}
                    key={i}
                />
            )
            list.push(rows)
        }
        return (
            <View style={{
                position: 'absolute',
                top: top,
                left: left,
                width: width,
                height: hor_height,
                flexDirection: 'row',
                backgroundColor: "transparent",
                overflow:'hidden'
            }}>
                {list}
            </View>
        )
    }

    //外框下框
    showBottomFrame() {
        let left = this.state.left
        let top = this.state.top
        let imgWidth = this.state.imgWidth
        let imgHeight = this.state.imgHeight
        let hor_width = this.state.hor_width
        let hor_height = this.state.hor_height
        let in_horn_width = this.state.in_horn_width
        let out_lining_width = this.state.out_lining_width || 0
        let in_lining_width = this.state.in_lining_width || 0
        let width = imgWidth + in_horn_width * 2 + out_lining_width * 2 + in_lining_width * 2
        let total = width / hor_width
        let in_hor_height = this.state.in_hor_height
        let rows
        let list = []
        left = this.state.horn_width
        top = top + imgHeight + hor_height + in_hor_height * 2 + out_lining_width * 2 + in_lining_width * 2

        for (let i = 0; i < total; i++) {
            rows = (
                <Image
                    source={{uri: hor_source}}
                    resizeMode={'cover'}
                    style={{width: hor_width, height: hor_height, transform: [{rotateX: '180deg'}]}}
                    key={i}
                />
            )
            list.push(rows)
        }
        return (
            <View style={{
                position: 'absolute',
                top: top,
                left: left,
                width: width,
                height: hor_height,
                flexDirection: 'row',
                backgroundColor: "transparent",
                overflow:'hidden'
            }}>
                {list}
            </View>
        )
    }

    //外框左框
    showLeftFrame() {
        let left = this.state.left
        let top = this.state.top
        let imgHeight = this.state.imgHeight
        let ver_width = this.state.ver_width
        let ver_height = this.state.ver_height
        let in_horn_height = this.state.in_horn_height
        let out_lining_width = this.state.out_lining_width || 0
        let in_lining_width = this.state.in_lining_width || 0
        let height = imgHeight + in_horn_height * 2 + out_lining_width * 2 + in_lining_width * 2
        let total = height / ver_height
        let hor_height = this.state.hor_height
        let in_ver_width = this.state.in_ver_width
        let rows
        let list = []
        left = 0
        top = top + hor_height
        LOG('ver_width==' + ver_width, 'ver_height===' + ver_height)
        for (let i = 0; i < total; i++) {
            rows = (
                <Image
                    source={{uri: ver_source}}
                    resizeMode={'cover'}
                    style={{width: ver_width, height: ver_height}}
                    key={i}
                />
            )
            list.push(rows)
        }
        return (
            <View style={{
                position: 'absolute',
                top: top,
                left: left,
                width: ver_width,
                height: height,
                overflow: 'hidden',
                backgroundColor: "transparent",
            }}>
                {list}
            </View>
        )
    }

    //外框右框
    showRightFrame() {
        let top = this.state.top
        let imgHeight = this.state.imgHeight
        let imgWidth = this.state.imgWidth
        let ver_width = this.state.ver_width
        let ver_height = this.state.ver_height
        let hor_height = this.state.hor_height
        let in_ver_width = this.state.in_ver_width
        let in_horn_height = this.state.in_horn_height
        let out_lining_width = this.state.out_lining_width || 0
        let in_lining_width = this.state.in_lining_width || 0
        let height = imgHeight + in_horn_height * 2 + out_lining_width * 2 + in_lining_width * 2
        let total = height / ver_height
        let rows
        let list = []
        let horn_width = this.state.horn_width
        top = top + hor_height
        for (let i = 0; i < total; i++) {
            rows = (
                <Image
                    source={{uri: ver_source}}
                    resizeMode={'cover'}
                    style={{width: ver_width, height: ver_height, transform: [{rotateY: '180deg'}]}}
                    key={i}
                />
            )
            list.push(rows)
        }
        return (
            <View style={{
                position: 'absolute',
                top: top,
                right: 0,
                width: ver_width,
                height: height,
                overflow: 'hidden',
                backgroundColor: "transparent"
            }}>
                {list}
            </View>
        )
    }


    _pop() {
        this.props.navigation.pop()
    }


    //前往商品清单
    FrameGoods() {
        let outerFrame = this.state.outerFrame
        let innerFrame = this.state.innerFrame
        let spec_id = outerFrame.spec_id
        if (innerFrame) {
            spec_id = spec_id + ',' + innerFrame.spec_id
        }
        this.props.navigation.push('Commodities',{
            spec_id:spec_id
        })
    }

    //前往情景预览
    toScene() {
       this.snapshot('shotView')
    }

    //截图
    snapshot(refname) {
        captureRef(this.refs[refname])
            .then(res =>
                this.props.navigation.push('Scene',{
                    frameImg:res
                })
            )
            .catch(
                error => (
                    Alert.alert(error)
                )
            );
    }

    collectFrame() {
        captureRef(this.refs['shotView'])
            .then(res =>
                this.collectLink(res)
            )
            .catch(
                error => (
                    Toast.show(error)
                )
            );
    }


    backName(res) {
        return list = res.split('/').pop()
    }

    showHeader() {
        return (
            <View style={styles.header}>
                <TouchableOpacity style={styles.header_back} onPress={() => this._pop()}>
                    <Image
                        source={require('../imgs/jy_02.png')}
                        resizeMode={'cover'}
                        style={{width: 20, height: 20,}}
                    />
                </TouchableOpacity>
                <View style={styles.opera_view}>
                    <TouchableOpacity onPress={() => this.toScene()} style={styles.header_back2}>
                        <Image
                            source={require('../imgs/match_01.jpg')}
                            resizeMode={'cover'}
                            style={{width: 17, height: 17, marginBottom: 2}}
                        />
                        <Text style={{fontSize: 12, color: "#333"}}>情景</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.header_back2} onPress={() => this.collectFrame()}>
                        <Image
                            source={require('../imgs/match_02.jpg')}
                            resizeMode={'cover'}
                            style={{width: 17, height: 17, marginBottom: 2}}
                        />
                        <Text style={{fontSize: 12, color: "#333"}}>收藏</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.FrameGoods()} style={styles.header_back2}>
                        <Image
                            source={require('../imgs/match_03.jpg')}
                            resizeMode={'cover'}
                            style={{width: 17, height: 17, marginBottom: 2}}
                        />
                        <Text style={{fontSize: 12, color: "#333"}}>清单</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        onPress={() => this.setState({isOpen: true})}
                        style={styles.header_back2}>
                        <Image
                            source={require('../imgs/match_04.jpg')}
                            resizeMode={'cover'}
                            style={{width: 17, height: 17, marginBottom: 2}}
                        />
                        <Text style={{fontSize: 12, color: "#333"}}>分享</Text>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }

    selectFrame(side) {
        this.setState({
            loaded:false
        })
        this.props.navigation.push("SelectFrame",{
            side:side,
            setFrame:this.setFrame.bind(this)
        })
    }


    async setFrame(item, side) {
        if (side == 'outside') {
            hor_source = item.length_img
            ver_source = item.wide_img
            horn_source = item.angle_img
            await this.setState({
                source_cm: item.width,
                outerFrame: item
            })
            this.setImgInfo()
        } else {
            in_hor_source = item.length_img
            in_ver_source = item.wide_img
            in_horn_source = item.angle_img
            await this.setState({
                in_source_cm: item.width,
                innerFrame: item
            })
            this.setImgInfo()
        }
    }


    async getInsideHor() {
        await Image.getSize(in_hor_source, (width, height) => {
            let obj = {}
            obj.width = width
            obj.height = height
            inHorImage = obj
            this.getInsideVer()
        })
    }

    async getInsideVer() {
        await Image.getSize(in_ver_source, (width, height) => {
            let obj = {}
            obj.width = width
            obj.height = height
            inVerImage = obj
            this.getInsideHorn()
        })
    }

    async getInsideHorn() {
        await Image.getSize(in_horn_source, (width, height) => {
            let obj = {}
            obj.width = width
            obj.height = height
            inHornImage = obj
            this.setInSourceInfo()
        })
    }

    setInSourceInfo() {
        let sceneWidth = this.state.sceneWidth
        let in_source_cm = this.state.in_source_cm
        let radio = this.backRadio(in_source_cm)
        let in_horn_width = Math.ceil(sceneWidth * radio)
        let in_horn_height = Math.ceil(in_horn_width * hornImage.height / hornImage.width)
        let in_hor_height = in_horn_height
        let in_hor_width = Math.ceil(in_hor_height * horImage.width / horImage.height)
        let in_ver_width = in_horn_width
        let in_ver_height = Math.ceil(in_ver_width * verImage.height / verImage.width)
        this.setState({
            in_hor_width: in_hor_width,
            in_hor_height: in_hor_height,
            in_horn_width: in_horn_width,
            in_horn_height: in_horn_height,
            in_ver_width: in_ver_width,
            in_ver_height: in_ver_height,
            loaded:true
        })
    }


    async showLining() {
        await this.setState({
            showLining: true,
            outLiningSize: 50,
            paperSide: 'out'
        })
        this.setImgInfo()
        // this.getHorImage()
        // let innerFrame = this.state.innerFrame
        // if(innerFrame){
        //     this.getInsideHor()
        // }
    }

    async showInLining() {
        await this.setState({
            showLining: true,
            inLiningSize: 10,
            paperSide: 'in'
        })
        this.setImgInfo()
        // this.getHorImage()
        // let innerFrame = this.state.innerFrame
        // if(innerFrame){
        //     this.getInsideHor()
        // }
    }


    showOperaView() {
        return (
            <View style={{flexDirection: 'row', paddingVertical: 15, borderTopWidth: 1, borderTopColor: "#e0e0e0"}}>
                <TouchableOpacity onPress={() => this.selectFrame('outside')} style={styles.column_btn}>
                    <Image
                        source={require('../imgs/match_06.jpg')}
                        resizeMode={'cover'}
                        style={{width: 25, height: 25, marginBottom: 5}}
                    />
                    <Text style={{fontSize: 12, color: "#000"}}>外框</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => this.selectFrame('inside')} style={styles.column_btn}>
                    <Image
                        source={require('../imgs/match_07.jpg')}
                        resizeMode={'cover'}
                        style={{width: 25, height: 25, marginBottom: 5}}
                    />
                    <Text style={{fontSize: 12, color: "#000"}}>内框</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => this.showLining()} style={styles.column_btn}>
                    <Image
                        source={require('../imgs/match_08.jpg')}
                        resizeMode={'cover'}
                        style={{width: 25, height: 25, marginBottom: 5}}
                    />
                    <Text style={{fontSize: 12, color: "#000"}}>外衬卡纸</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => this.showInLining()} style={styles.column_btn}>
                    <Image
                        source={require('../imgs/match_09.jpg')}
                        resizeMode={'cover'}
                        style={{width: 25, height: 25, marginBottom: 5}}
                    />
                    <Text style={{fontSize: 12, color: "#000"}}>内衬卡纸</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => this.setState({showBg: true})} style={styles.column_btn}>
                    <Image
                        source={require('../imgs/match_10.png')}
                        resizeMode={'cover'}
                        style={{width: 25, height: 25, marginBottom: 5}}
                    />
                    <Text style={{fontSize: 12, color: "#000"}}>背景</Text>
                </TouchableOpacity>
            </View>
        )
    }


    //展示外、内衬操作View
    showLiningView() {
        let list
        let paperIndex
        let paperSide = this.state.paperSide
        if (paperSide == 'out') {
            list = this.state.outPaper
            paperIndex = this.state.liningIndex
        } else {
            list = this.state.inPaper
            paperIndex = this.state.inLiningIndex
        }
        if (!list) {
            return null
        }
        return (
            <View style={styles.lining_view}>
                <TouchableOpacity onPress={() => this.closeLining(-1, paperSide)} style={styles.lining_item}>
                    <View style={styles.lining_icon_view}>
                        <Image
                            source={require('../imgs/error.png')}
                            resizeMode={'cover'}
                            style={{width: 20, height: 20}}
                        />
                    </View>
                    <Text style={{fontSize: 12, color: "#000"}}>无</Text>
                </TouchableOpacity>
                <ScrollView style={{flex: 1}} horizontal={true} showsHorizontalScrollIndicator={false}>
                    {
                        list.map((item, index) => {
                            return (
                                <TouchableOpacity
                                    onPress={() => this.setLining(index, paperSide)}
                                    key={index}
                                    style={[styles.lining_item, index == paperIndex ? {backgroundColor: "#e0e0e0"} : null]}>
                                    <Image
                                        source={{uri: item.image_url}}
                                        resizeMode={'cover'}
                                        style={{width: 40, height: 40, marginBottom: 5}}
                                    />
                                    <Text style={{fontSize: 12, color: "#000"}}>{item.title}</Text>
                                </TouchableOpacity>
                            )
                        })
                    }
                </ScrollView>
                <TouchableOpacity onPress={() => this.setState({showLining: false})} style={styles.lining_item}>
                    <View style={styles.lining_icon_view}>
                        <Image
                            source={require('../imgs/true.png')}
                            resizeMode={'cover'}
                            style={{width: 30, height: 30}}
                        />
                    </View>
                    <Text style={{fontSize: 12, color: "#000"}}>确定</Text>
                </TouchableOpacity>
            </View>
        )
    }


    showBgColorView() {
        let bgColor = this.state.bgColor
        let selectBgColor = this.state.selectBgColor
        return (
            <View style={styles.lining_view}>
                <TouchableOpacity style={styles.lining_item}
                                  onPress={() => this.setState({showBg: false, selectBgColor: ''})}>
                    <View style={styles.lining_icon_view}>
                        <Image
                            source={require('../imgs/error.png')}
                            resizeMode={'cover'}
                            style={{width: 20, height: 20}}
                        />
                    </View>
                    <Text style={{fontSize: 12, color: "#000"}}>无</Text>
                </TouchableOpacity>
                <ScrollView style={{flex: 1}} horizontal={true} showsHorizontalScrollIndicator={false}>
                    {
                        bgColor.map((item, index) => {
                            return (
                                <TouchableOpacity
                                    onPress={() => this.setState({selectBgColor: item})}
                                    key={index}
                                    style={[styles.lining_item, selectBgColor.id == item.id ? {backgroundColor: "#e0e0e0"} : null]}>
                                    <LinearGradient
                                        colors={['#' + item.left_color, '#' + item.right_color]}
                                        start={{x: 0, y: 0}}
                                        end={{x: 1, y: 1}}
                                        locations={[0, 0.75]}
                                        style={{borderRadius: 5, marginBottom: 5}}
                                    >
                                        <View style={{width: 40, height: 40, borderRadius: 5}}/>
                                    </LinearGradient>
                                    <Text style={{fontSize: 12, color: "#000"}}>{item.title}</Text>
                                </TouchableOpacity>
                            )
                        })
                    }
                </ScrollView>
                <TouchableOpacity style={styles.lining_item} onPress={() => this.setState({showBg: false})}>
                    <View style={styles.lining_icon_view}>
                        <Image
                            source={require('../imgs/true.png')}
                            resizeMode={'cover'}
                            style={{width: 30, height: 30}}
                        />
                    </View>
                    <Text style={{fontSize: 12, color: "#000"}}>确定</Text>
                </TouchableOpacity>
            </View>
        )
    }


    async closeLining() {
        let paperSide = this.state.paperSide
        if (paperSide == 'out') {
            await this.setState({
                showLining: false,
                outLiningSize: 0
            })
        } else {
            await this.setState({
                showLining: false,
                inLiningSize: 0
            })
        }
        this.setImgInfo()
        // this.getHorImage()
        // let innerFrame = this.state.innerFrame
        // if(innerFrame){
        //     this.getInsideHor()
        // }
    }

    async setLining(index, paperSide) {
        if (paperSide == 'out') {
            let outPaper = this.state.outPaper
            let img_uri = outPaper[index].image_url
            await this.getPaperInfo(img_uri, index)
        } else {
            let inPaper = this.state.inPaper
            let img_uri = inPaper[index].image_url
            await this.getInPaperInfo(img_uri, index)
        }

        this.setImgInfo()
        // this.getHorImage()
        // let innerFrame = this.state.innerFrame
        // if(innerFrame){
        //     this.getInsideHor()
        // }
    }


    getPaperInfo(img_uri, index) {
        Image.getSize(img_uri, (width, height) => {
            this.setState({
                outPaperWidth: width,
                outPaperHeight: height,
                liningIndex: index,
                outPaperUri: img_uri
            })
        }, (error) => {
            LOG('图片路径错误。。。。。。。。' + error);
        })
    }

    getInPaperInfo(img_uri, index) {
        Image.getSize(img_uri, (width, height) => {
            this.setState({
                inPaperWidth: width,
                inPaperHeight: height,
                inLiningIndex: index,
                inPaperUri: img_uri
            })
        }, (error) => {
            LOG('图片路径错误。。。。。。。。' + error);
        })
    }


    async setOutliningSize(item, paperSide) {
        if (paperSide == 'out') {
            await this.setState({
                outLiningSize: item
            })
        } else {
            await this.setState({
                inLiningSize: item
            })
        }
        this.setImgInfo()
    }


    liningSizeView() {
        let showLining = this.state.showLining
        if (!showLining) {
            return false
        }
        let paperSide = this.state.paperSide
        let list
        let size
        if (paperSide == 'out') {
            list = this.state.outLiningSizeList
            size = this.state.outLiningSize
        } else {
            list = this.state.inLiningSizeList
            size = this.state.inLiningSize
        }
        return (
            <View style={styles.lining_size_view}>
                <View style={styles.lining_size}>
                    {
                        list.map((item, index) => {
                            return (
                                <TouchableOpacity
                                    onPress={() => this.setOutliningSize(item, paperSide)}
                                    style={styles.lining_size_item} key={index}>
                                    {
                                        item == size ?
                                            <View style={styles.select_size_item}>
                                                <Text style={{fontSize: 14, color: "#AE0000"}}>{item}</Text>
                                            </View> :
                                            <View style={styles.size_circle}/>
                                    }
                                </TouchableOpacity>
                            )
                        })
                    }
                </View>
            </View>
        )
    }

    operaView() {
        let showLining = this.state.showLining
        let showBg = this.state.showBg
        if (!showBg && !showLining) {
            return this.showOperaView()
        } else if (showLining) {
            return this.showLiningView()
        } else if (showBg) {
            return this.showBgColorView()
        } else {
            return null
        }
    }

    saveImage() {
        captureRef(this.refs['shotView'])
            .then(res =>
                this.saveImageToAlbum(res)
            )
            .catch(
                error => (
                    Toast.show(error)
                )
            );
    }

    saveImageToAlbum(uri) {
        let url = URLconstant.UPLOAD_IMAGE
        let datakey = []
        let upload_photo = {
            uri: uri,
            type: "multipart/form-data",
            name: this.backName(uri)
        }
        datakey['image_file_link'] = upload_photo
        let that = this
        that.setState({
            isOpen: false
        })
        Util.post(url, datakey, (datas) => {
            if (datas.status == 0) {
                let img = datas.data
                if (Platform.OS === 'android') {
                    //LOG("保存图片成功 data==" + uri);
                    SaveModule.initSave(img, (obj) => {
                        Toast.show("保存图片成功");
                    }, (err) => {
                        Toast.show("保存图片失败");
                    });
                } else {
                    CameraRoll.saveToCameraRoll(img).done(function (data) {
                        LOG("保存图片成功 data==" + data);
                        Alert.alert("保存图片成功", 2);
                    }, function (err) {
                        LOG("保存图片失败 err==" + err);
                        Alert.alert("保存图片失败", 2);

                    });
                }
            } else {
                Toast.show(datas.msg)
            }
        }, (err) => {

        })
    }

    showModal(){
        return(
            <Modal
                isOpen={this.state.isOpen}
                position={'bottom'}
                style={styles.save_modal}
                onClosed={() => this.setState({isOpen:false})}
                swipeToClose={false}
                backdropPressToClose={false}
            >
                <TouchableOpacity
                    onPress={()=>this.saveImage()}
                    style={{width:Util.size.width,height:50, marginBottom:1,alignItems:'center',justifyContent:'center',backgroundColor:"#fff"}}>
                    <Text style={{fontSize:14,color:"#000"}}>保存至手机相册</Text>
                </TouchableOpacity>
                <TouchableOpacity
                    onPress={()=>this.setState({isOpen:false})}
                    style={{width:Util.size.width,height:50,alignItems:'center',justifyContent:'center',backgroundColor:"#fff"}}>
                    <Text style={{fontSize:14,color:"#000"}}>取消</Text>
                </TouchableOpacity>
            </Modal>
        )
    }


    render() {
        let selectBgColor = this.state.selectBgColor
        return (
            <View style={{flex: 1}}>
                {this.showHeader()}
                {
                    !this.state.loaded?
                        <View style={{flex:1}}>
                            {Util.loading()}
                        </View>:
                        <View style={{flex:1}}>
                            {
                                selectBgColor ?
                                    <LinearGradient
                                        colors={['#' + selectBgColor.left_color, '#' + selectBgColor.right_color]}
                                        start={{x: 0, y: 0}}
                                        end={{x: 1, y: 1}}
                                        locations={[0, 0.75]}
                                        style={{flex: 1}}
                                    >
                                        <ScrollView style={{flex: 1}}>
                                            {this.showFrame()}
                                        </ScrollView>
                                        {this.liningSizeView()}
                                    </LinearGradient> :
                                    <View style={{flex: 1, backgroundColor: "#f0f0f0"}}>
                                        <ScrollView style={{flex: 1}}>
                                            {this.showFrame()}
                                        </ScrollView>
                                        {this.liningSizeView()}
                                    </View>
                            }

                            {this.operaView()}
                            {this.showModal()}
                        </View>
                }
            </View>
        )
    }
}
var styles = StyleSheet.create({
    header: {
        width: Util.size.width,
        height: 50,
        justifyContent: 'space-between',
        alignItems: "center",
        flexDirection: 'row',
        backgroundColor: "#fff",
        borderBottomWidth: 1,
        borderBottomColor: "#e0e0e0"
    },
    header_back: {
        width: 50,
        height: 50,
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'column'
    },
    header_back2: {
        paddingLeft: 10,
        height: 50,
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'column'
    },
    opera_view: {
        flexDirection: 'row',
        height: 50,
        alignItems: 'center',
        justifyContent: 'center',
        paddingRight: 10
    },
    column_btn: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    lining_view: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingHorizontal: 10
    },
    lining_item: {
        paddingHorizontal: 5,
        height: 80,
        alignItems: 'center',
        paddingTop: 8
    },
    lining_icon_view: {
        width: 40,
        height: 40,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 5,
        marginBottom: 5,
        borderWidth: 1,
        borderColor: "transparent"
    },
    lining_size_view: {
        position: 'absolute',
        width: Util.size.width,
        left: 0,
        bottom: 5,
        alignItems: 'center',
    },
    lining_size: {
        width: Util.size.width - 50,
        height: 40,
        borderRadius: 20,
        backgroundColor: "#AE0000",
        flexDirection: 'row'
    },
    lining_size_item: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        height: 40
    },
    size_circle: {
        width: 8,
        height: 8,
        borderRadius: 4,
        backgroundColor: "#fff",
    },
    select_size_item: {
        width: 40,
        height: 40,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 20,
        backgroundColor: "#fff",
    },
    save_modal: {
        width: Util.size.width,
        height: 101,
        backgroundColor: 'transparent'
    }
})